
import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TextInput
} from 'react-native';
import SelectableSectionsListView from '../components/SelectableSectionsListView';
import Autocomplete from '../lib/react-native-autocomplete';
import CssUtil from '../lib/CssUtil';
import CommonTouchable from '../lib/CommonTouchable';

const DATA = [{"name":"部长","PY":["buzhang"],"firstPY":["bz"]},{"name":"厨师","PY":["chushi"],"firstPY":["cs"]},{"name":"厨师长","PY":["chushichang","chushizhang"],"firstPY":["csc","csz"]},{"name":"厨师长","PY":["chushichang","chushizhang"],"firstPY":["csc","csz"]},{"name":"传菜","PY":["chuancai","zhuancai"],"firstPY":["cc","zc"]},{"name":"点菜员","PY":["diancaiyuan","diancaiyun"],"firstPY":["dcy"]},{"name":"店长","PY":["dianchang","dianzhang"],"firstPY":["dc","dz"]},{"name":"服务员","PY":["fuwuyuan"],"firstPY":["fwy"]},{"name":"供货商","PY":["gonghuoshang"],"firstPY":["ghs"]},{"name":"行政总厨","PY":["xingzhengzongchu"],"firstPY":["xzzc"]},{"name":"酒店总经理","PY":["jiudianzongjingli"],"firstPY":["jdzjl"]},{"name":"领班","PY":["lingban"],"firstPY":["lb"]},{"name":"前厅经理","PY":["qiantingjingli"],"firstPY":["qtjl"]},{"name":"收银","PY":["shouyin"],"firstPY":["sy"]},{"name":"迎宾领位","PY":["yingbinlingwei"],"firstPY":["yblw"]},{"name":"主管","PY":["zhuguan"],"firstPY":["zg"]}];

const myData = {"history":[['送餐员']],"hot":[['厨师','厨师长','服务员','店长','领班']],
"B":["部长"],"C":["厨师","厨师长","厨师长","传菜"],"D":["点菜员","店长"],"F":["服务员"],"G":["供货商"],"X":["行政总厨"],"J":["酒店总经理"],"L":["领班"],"Q":["前厅经理"],"S":["收银"],"Y":["迎宾领位"],"Z":["主管"]}

class SectionHeader extends Component {
  _renderSection(title){
    let styles = {
      sectionHeader: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingVertical: 10,
        backgroundColor: '#EEF2F5',
      },
      sectionTitle: {
        color: '#BCBDBF',
        fontSize: 13,
      },
      verticalLine: {
        width: 3,
        height: 12,
        marginLeft: 4,
        marginRight: 5,
        backgroundColor: '#FACD00',
      },
    }
    return (
      <View style={styles.sectionHeader}>
        <View style={styles.verticalLine}></View>
        <Text style={styles.sectionTitle}>{title}</Text>
      </View>
    );
  }
  render() {
    // 是历史城市或热门城市
    if(this.props.title == 'history'){
      return this._renderSection('历史选择');
    }else if(this.props.title == 'hot'){
      return this._renderSection('热门类别');
    }
    var textStyle = {
      padding: 5,
      fontWeight:'700',
      color:'#C0C2C3',
      fontSize: 16,
      marginLeft: 10,
    };

    var viewStyle = {
      backgroundColor: '#EEF2F5',
    };
    return (
      <View style={viewStyle}>
        <Text style={textStyle}>{this.props.title}</Text>
      </View>
    );
  }
}

class SectionItem extends Component {
  render() {
    let title = this.props.title
    if(title == 'history'){
      title = '*';
    }else if(title == 'hot'){
      title = '!';
    }
    return (
      <Text style={{color:'#fff', marginVertical: 2}}>{title}</Text>
    );
  }
}

class Cell extends Component {
  _renderCell(items){
    let styles = {
        container: {
          flexDirection: 'row',
          flexWrap: 'wrap',
          padding: 5,
          backgroundColor: '#EEF2F5',
        },
        button: {
          width: 102,
          height: 30,
          justifyContent: 'center',
          alignItems: 'center',
          marginHorizontal: 4,
          marginBottom: 8,
          borderRadius: 6,
          borderWidth: StyleSheet.hairlineWidth,
          borderColor: '#DEDFE1',
          backgroundColor: '#fff'
        },
        buttonText: {
          color: '#6C7987',
          fontSize: 14,
        },
    }
    return(
      <View style={styles.container}>
        {
          items.map((n, i)=>{
            return(
               <CommonTouchable
                  key={i}
                  style={styles.button}
                  textStyle={styles.buttonText}
                >
                {n}
              </CommonTouchable>
            )
          })
        }
      </View>     
    );
  }
  render() {
    // 是历史城市或热门城市
    if(Array.isArray(this.props.item)){
      return this._renderCell(this.props.item);
    }
    let viewStyle = {
      justifyContent: 'center',
      marginLeft: 15,
      height: 40,
      borderBottomWidth: StyleSheet.hairlineWidth,
      borderBottomColor: '#EEEFF0',
      backgroundColor: '#fff'
    }
    return (
      <CommonTouchable style={viewStyle}>
        <Text style={{ color: '#333', fontSize: 15 }}>{this.props.item}</Text>
      </CommonTouchable>
    );
  }
}


class SearchPostion extends Component {

  constructor(props) {
    super(props);
    this.state = {
      data: DATA,
      input: '',
      addPostionStep: 1,
    };
  }

  _renderItem(data) {
    let styles = {
      height: 40,
      justifyContent: 'center',
      borderBottomWidth: StyleSheet.hairlineWidth,
      borderBottomColor: '#F0F1F2',
    }
    return (
      <CommonTouchable style={styles} onPress={() => this.setState({ query: data })}>
        <Text style={{ color: '#000'}}>{data.name}</Text>
      </CommonTouchable>
    );
  }

  _renderAddPostionStep1(){
    return (
      <View style={{alignItems: 'center',}}>
        <Text style={{ color: '#B4B5B6', fontSize: 15}}>
          没有找到
          <Text style={{color: '#575859'}}>
            {
              this.state.input != '' ? `“${this.state.input}”` : ''
            }
          </Text>
          相关职位
        </Text>
        <CommonTouchable style={{
          width: 120,
          height: 40,
          marginTop: 25,
          borderRadius: 6,
          justifyContent: 'center',
          alignItems: 'center',
          borderWidth: StyleSheet.hairlineWidth,
          borderColor: '#DEDFE0'
        }}
        textStyle={{ color: '#F9CD00', fontSize: 15 }}
        onPress={() => {
          this.setState({
            addPostionStep: 2
          });
        }}
        >
          去添加个
        </CommonTouchable>
      </View>
    );
  }
  _renderAddPostionStep2(){
    return(
      <View style={{alignItems: 'center',}}>
         <Text style={{ color: '#B4B5B6', fontSize: 15}}>
          没有找到
          <Text style={{color: '#575859'}}>
            {
              this.state.input != '' ? `“${this.state.input}”` : ''
            }
          </Text>
          相关职位
        </Text>
        <View style={{
          flexDirection: 'row',
          width: 260,
          height: 40,
          marginTop: 25,
          borderRadius: 6,
          padding: 5,
          justifyContent: 'center',
          alignItems: 'center',
          borderWidth: StyleSheet.hairlineWidth,
          borderColor: '#DEDFE0'
        }}>
          <TextInput
            placeholder={'请输入类别，并等待审核哦'}
            placeholderTextColor={"#B7B8C0"}
            clearButtonMode={'while-editing'}
            underlineColorAndroid={'transparent'}
            style={{fontSize: 14, color: '#333', flex: 1, height: 38}}
          />
          <CommonTouchable style={{
            width: 60,
            height: 35,
            justifyContent: 'center',
            alignItems: 'center',
            borderLeftWidth: StyleSheet.hairlineWidth,
            borderLeftColor: '#DEDFE0'
          }}
          textStyle={{ color: '#F9CD00', fontSize: 15 }}
          onPress={() => {
            this.setState({
              addPostionStep: 3
            });
          }}
          >
            提交
          </CommonTouchable>
        </View>
      </View>
    );
  }
  _renderAddPostionStep3(){
    return(
      <View style={{marginTop: 25}}>
        <Text style={{ color: '#292A2C', fontSize: 15, textAlign: 'center'}}>
          提交成功, 感谢您的反馈！    
        </Text>
        <Text style={{ color: '#B4B5B6', fontSize: 12, marginTop: 8, textAlign: 'center'}}>
          审核会在7个工作日内结束，您可以正常发布职位哦。
        </Text>
      </View>
    );
  }
  _renderEmptyResult(){
    return (
      <View style={styles.list}>
        <View style={{ marginTop: 100, alignItems: 'center' }}>
          {
            this['_renderAddPostionStep' + this.state.addPostionStep]()
          }
        </View>
      </View>
    );
  }

  render() {
    const { input } = this.state;
    let data = [];
    if(input.trim() != ''){
      const regex = new RegExp(`^${input.trim()}`, 'i');
      data = this.state.data.filter((n) => {
        if(n.name.search(regex) >= 0) {
          return true;
        }else if(n.PY.findIndex(n => n.search(regex) >= 0) >= 0){
          return true;
        }else if(n.firstPY.findIndex(n => n.search(regex) >= 0) >= 0){
          return true;
        }
        return false;
      });
    }    
    
    return (
      <View style={styles.wrapper}>
        <View style={styles.autocomplete}>
          <Autocomplete
						data={data}
						placeholder={'输入职位名或拼音查询'}
            placeholderTextColor={"#B7B8C0"}
            clearButtonMode={'while-editing'}
            underlineColorAndroid={'transparent'}
						style={styles.input}
						inputContainerStyle={styles.inputContainer}
						onChangeText={text => this.setState({ input: text, addPostionStep: 1 })}
						containerStyle={styles.container}
						listStyle={styles.list}
						renderItem={data => this._renderItem(data)}
            renderEmptyResult={() => this._renderEmptyResult()}
					/>
        </View>
        
        <View style={{ flex: 1, marginTop: 45, backgroundColor: '#fff' }}>
          <SelectableSectionsListView
            data={myData}
            cell={Cell}
            cellHeight={45}
            sectionHeader={SectionHeader}
            sectionListItem={SectionItem}
            sectionListStyle={styles.sectionListStyle}
            sectionHeaderHeight={30}
            useDynamicHeights
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
	wrapper: {
		flex: 1,
	},
  autocomplete: {
    flex: 1,
    left: 0,
    position: 'absolute',
    right: 0,
    top: 0,
    zIndex: 1,
  },
  input: {
    flex: 1,    
    height: 30,
    paddingLeft: 5,
    borderWidth: 0,
    fontSize: 14,
    borderRadius: 5,
    color: '#333',
    backgroundColor: '#EBECEE',
  },
  inputContainer: {
    backgroundColor: '#fff',
    borderWidth: 0,
    padding: 8,
  },
  list: {
    borderWidth: 0,
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: '#e2e2e2',
    padding: 10,
    height: CssUtil.size.height - 60,
    backgroundColor: '#fff'
  },
  container: {
  },
	name: {
		fontSize: 15,
    color: '#000'
	},
  sectionListStyle: {
    width: 20,
    alignItems: 'center',
    borderRadius: 15,
    paddingTop: 10,
    paddingBottom: 10,
    marginRight: 3,
    backgroundColor: 'rgba(167, 168, 172, 0.7)',
  }
  
});

export default SearchPostion;